import React, { useState, useEffect } from 'react';
import styles from './index.module.less';
import classnames from 'classnames';

const Tabs: React.FC<any> = (props) => {
  const { data, onChange, dataType, total } = props;
  const [activeIndex, setActiveIndex] = useState(1);

  const handleClick = (value: number) => {
    setActiveIndex(value);
    onChange(value);
  };

  useEffect(() => {
    if (dataType) {
      setActiveIndex(dataType);
    }
  }, [dataType]);

  useEffect(() => {
    onChange(activeIndex);
  }, [activeIndex]);

  return (
    <div className={styles.wrap}>
      <ul className={styles.tabs}>
        {
          data.map((item: { text: string; value: number }, index: number) => (
            <li
              key={index}
              className={classnames(styles.item, activeIndex === item.value ? 'active' : '')}
              onClick={() => handleClick(item.value)}
            >{item.text}
              {/* 待审批数量 */}
              {total > 0 && item.value === 1 && <p className={styles['tips']}>{total}</p>}
            </li>
          ))
        }
      </ul>
    </div >
  );
};

export default Tabs;